import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Link, useHistory } from 'react-router-dom'
import { Layout, Menu, Breadcrumb, Row, Col, Button, Tabs, Space, message, PageHeader, Typography, Modal } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { Select, Form, Input, Checkbox } from 'antd'
import { checkAdmin } from '../../../utils/loginUtils/loginMethod'
import api from '../../../utils/requestUtils/apiConfig'
import axios from 'axios'
export default ({
    defaultValue,
    visible,
    setVisible,
    option,
    setDefaultValue,
    setRepeat,
    repeat,
    coachInfoList,
    setCoachInfoList,
    coachInfo

}) => {
    console.log(defaultValue,"defalultvalue")
    const [id, setId] = useState(defaultValue.id)
    const [type, setType] = useState(defaultValue.type)
    const [trueName, setTrueName] = useState(defaultValue.trueName)
    const [username, setUserName] = useState(defaultValue.username)
    const [password, setPassword] = useState(defaultValue.password)
    const [coachId, setCoachId] = useState(defaultValue.coachId)

    const { Title, Text } = Typography;
    const { TextArea } = Input;
    const { TabPane } = Tabs;
    const history = useHistory()
    if (!checkAdmin()) {
        message.error('请使用管理员账号登录')
        history.push('/user')
    }
    //提交信息
    const handleOk = () => {
        const params = {
            id,
            type,
            trueName,
            username,
            password,
            coachId,
        }
        console.log(params)
        if (option == 'save') {
            axios({
                url: api.saveUserInfo,
                method: 'post',
                headers: '',
                params: '',
                data: params
            }).then((res) => {
                const mes = res.data.message
                if (mes == 'success') {
                    message.success('保存成功')
                }
                else {
                    message.error('保存失败')
                }
                setDefaultValue({})
                setRepeat(repeat + 1)
                setVisible(false)
            })
        }
        else if (option == 'update') {
            axios({
                url: api.updateUserInfoById,
                method: 'post',
                headers: '',
                params: '',
                data: params
            }).then((res) => {
                const mes = res.data.message
                if (mes == 'success') {
                    message.success('修改成功')
                }
                else {
                    message.error('修改失败')
                }
                setDefaultValue({})
                setRepeat(repeat + 1)
                setVisible(false)
            })
        }
    }

    // const layout = {
    //     labelCol: {
    //         span: 8,
    //     },
    //     wrapperCol: {
    //         span: 16,
    //     },
    // };
    // const tailLayout = {
    //     wrapperCol: {
    //         offset: 8,
    //         span: 16,
    //     },
    // };
    
    const answerOptions = [
        { label: "管理员", value: 0 },
        { label: "教练", value: 1 },
        { label: "学员", value: 2 },
    ]




    useEffect(() => {
        setId(defaultValue.id)
        setType(defaultValue.type)
        setTrueName(defaultValue.trueName)
        setUserName(defaultValue.username)
        setPassword(defaultValue.password)
        setCoachId(defaultValue.coachId)
    }, [visible])


    return (
        <>
            <Modal
                title={option == 'save' ? "添加用户" : "修改用户"}
                visible={visible}
                onCancel={() => { setDefaultValue({}); setVisible(false) }}
                onOk={() => { handleOk() }}
                okText='提交'
            >
                <Space
                    direction='vertical'
                >


                    <Space>
                        <span>真实姓名：</span>
                        <Input
                            style={{ width: 300 }}
                            placeholder="请输入真实姓名"
                            value={trueName}
                            onChange={(e) => { setTrueName(e.target.value) }}

                        />
                    </Space>
                    <Space>
                        <span>用户名：</span>
                        <Input
                            style={{ width: 300 }}
                            placeholder="请输入用户名"
                            value={username}
                            onChange={(e) => { setUserName(e.target.value) }}

                        />
                    </Space>

                    <Space>
                        <span>密码：</span>
                        <Input
                            style={{ width: 300 }}
                            value={password}
                            onChange={(e) => { setPassword(e.target.value) }}
                        />
                    </Space>

                    <Space>
                        <span>教练</span>
                        <Select
                            style={{ width: 300 }}
                            value={coachId}
                            options={coachInfoList}
                            onChange={(value) => {
                                setCoachId(value)
                            }}

                        />
                    </Space>

                    <Space
                    >
                        <span>角色：</span>
                        <Select
                            style={{ width: 300 }}
                            value={type}
                            options={answerOptions}
                            onChange={(value) => {
                                setType(value)
                            }}
                        />

                    </Space>

                    
                </Space>

            </Modal>
        </>
    )
}


